<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>找回密码</title>
	<link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css"/>
	<link rel="stylesheet" href="${newframe}/template/tpl_css/update.css" type="text/css"/>
	<script src="${newframe}/js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="${newframe}/login/js/newFindpassword.js" type="text/javascript"></script>
</head>
<body>
	<div class="wrapper">
		<div id="logo">
			<img src="${newframe}/template/images/loginimgs/login_logo.png" height="51" width="262"/>
			<span>修改密码</span>
		</div>
		<div id="title">
			<ul class="step">
				<li class="certity">
					验证身份
					<span class="active"></span>
				</li>
				<li class="set">设置新密码</li>
				<li class="success">修改成功</li>
			</ul>
		</div>
		<div id="main">
			<div id="formlist">
				<div class="phonenum">
					<label>手机号码:</label>
					<input type="text" placeholder="请输入您的手机号" id="mobile"/>
					<span>云平台将发送手机动态码到此手机，请保持畅通</span>
				</div>
				<div class="dynamic_code">
					<label>手机动态码:</label>
					<input type="text" placeholder="动态码" class="dycode" id="mobileVerifyCode"/>
					<input type="button" value="立即获取" class="get" id="sendVerifyCode"/>
					<!-- <input type="button" value="11秒" class="second"/> -->
				</div>
				<div class="identify_code">
					<label>验证码:</label>
					<input type="text" id="verifyCode_phone"/>
				</div>
				<p class="text">输入图中的字符,不区分大小写</p>
				<div class="pic">
					<img id="phoneVerifyCode" src="${rc.contextPath}/home/verifyCode/get"  alt="" width="91px" height="36px"/>
					<span onclick="changeImg('phoneVerifyCode')">看不清请换一张</span>
				</div>
				<div class="next">
					<button class="next">下一步</button>
				</div>
			</div>
		</div>
		<div id="mainset">
			<div class="setmsg">
				<div class="newpsw">
					<label>新密码:</label>
					<input type="password" placeholder="新密码" id="newPassword" />
				</div>
				<div class="morepsw">
					<label>再次输入新密码:</label>
					<input type="password" placeholder="新密码" id="newPasswordRedo"/>
				</div>

			</div>
			<div class="nextstep">
				<button class="prev">上一步</button>
				<button class="next">下一步</button>
			</div>
		</div>
        <div id="mainsuccess">
            <div class="successbtn">
                <img src="${newframe}/template/images/loginimgs/successful.png">
            </div>
            <div class="back">
                <button id="back_login">返回登录</button>
            </div>

        </div>
		<div id="footer">
			<p class="copyright"></p>
<%--			<p class="copyright">版权所有 ©2000-2019　宁波美康生物科技股份有限公司</p>--%>
		</div>

	</div>
<script type="text/javascript">

    var ajaxVerifyCodeResult = false;
    var ajaxResetByMobileResult = false;

    $(function () {
    	$("#back_login").click(function(){
    		window.location.href = "${ctx}/login";
    	});
        $("#sendVerifyCode").click(function () {
            if(!(/^1\d{10}$/.test($("#mobile").val()))){
                alert("请填写正确的手机号码");
                $("#mobile")[0].focus();
                return false;
            }else{
                $.ajax({
                    url:'${ctx}/home/resetByMobile/verifyCode',
                    type:'post',
                    data:{mobile:$("#mobile").val()},
                    async : false, //默认为true 异步
                    dataType: "json",
                    error:function(){
                        alert('error');
                    },
                    success:function(data){
                        if(!(data.success)){
                            alert(data.msg);//失败
                        }else{
                            waitTime($("#sendVerifyCode"), 60);
                        }
                    }
                });
            }
        });

        /**
         * 获取验证码后，等待60秒
         * */
        function waitTime(o, wait) {//o为按钮的对象，wait为等待时间（秒）
            if (wait == 0) {
                o.removeAttr("disabled");
                o.val("立即获取");//改变按钮中value的值
            } else {
                o.attr("disabled", true);//倒计时过程中禁止点击按钮
                o.val(wait + "秒");//改变按钮中value的值
                wait--;
                setTimeout(function () {
                            waitTime(o, wait);//循环调用
                        },
                        1000);
            }
        }
    });

    /**
     * 重新获取验证码
     * */
    function changeImg(id){
        var src = $("#"+id).attr("src");
        $("#"+id).attr("src",chgUrl(src));
    }

    /**
     * 设置验证码url地址（添加时间戳）
     * */
    function chgUrl(url) {
        var timestamp = (new Date()).valueOf();
        if (url.indexOf("?") >= 0) {
            if (url.indexOf("timestamp=") >= 0) {
                var urlArr = url.split("timestamp=");
                var i;
                var rearUrl = "";
                if (i = urlArr[1].indexOf("&") >= 0) {
                    rearUrl = urlArr[1].substring(i, urlArr[1].length);
                }
                url = urlArr[0] + "timestamp=" + timestamp + rearUrl;
            } else {
                url = url + "&timestamp=" + timestamp;
            }
        } else {
            url = url + "?timestamp=" + timestamp;
        }
        return url;
    }

    /**
     * ajax验证 验证码和手机动态码是否正确
     * */
    function ajaxVerifyCode(){
        $.ajax({
            url:'${ctx}/home/resetByMobileValidate',
            type:'post',
            data: {
                mobile: $("#mobile").val(),
                mobileVerifyCode: $("#mobileVerifyCode").val(),
                verifyCode: $("#verifyCode_phone").val()
            },
            async : false, //默认为true 异步
            dataType: "json",
            error:function(){
                alert('error');
                ajaxVerifyCodeResult = false;
            },
            success:function(data){
                if(!(data.success)){
                    if(data.error=="expired_mobile_code"){
                        alert(data.msg);//手机动态码过期
                        $("#mobileVerifyCode")[0].focus();
                        //提示是否重新获取
                    }else if(data.error=="error_verify_code"){
                        alert(data.msg);//验证码错误
                        $("#verifyCode_phone")[0].focus();
                    }else{
                        alert(data.msg);
                        $("#mobileVerifyCode")[0].focus();
                    }
                    ajaxVerifyCodeResult = false;
                }else{
                    ajaxVerifyCodeResult = true;
                }
            }
        });
    }

    /**
     * ajax 根据手机号码修改密码
     * */
    function ajaxResetByMobile(){
        $.ajax({
            url:'${ctx}/home/resetByMobile',
            type:'post',
            data: {
                mobile: $("#mobile").val(),
                newPassword: $("#newPassword").val()
            },
            async : false, //默认为true 异步
            dataType: "json",
            error:function(){
                alert('error');
                ajaxResetByMobileResult = false;
            },
            success:function(data){
                if(!(data.success)){
                    alert(data.msg);
                    ajaxResetByMobileResult = false;
                }else{
                    ajaxResetByMobileResult = true;
                }
            }
        });
    }
</script>
</body>
</html>